<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>签到页面</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="js/vue.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/request.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .container {
      margin: 100px 20px;
    }

    .name {
      margin: 10px;
    }

    .signin {
      margin-top: 50%;
      width: 100%;
    }

    .btn-signin {
      margin: 0 15%;
      width: 70%;
    }

    .stuName,
    .className {
      margin-top: 10px;
    }

    .el-radio.is-bordered+.el-radio.is-bordered {
      margin-left: 0px;
    }

    .el-dropdown-menu {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
        <el-form-item prop="speciality" label="专业">
          <el-dropdown @command="getClassNames" trigger="click">
            <el-button type="primary">
              {{this.ruleForm.speciality}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in specialityNames" :command=item :key="item">{{item}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>

        <el-form-item prop="stuClass" label="班级">
          <el-dropdown @command="getStuNames" trigger="click">
            <el-button type="primary">
              {{this.ruleForm.stuClass}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in classNames" :command=item.studentClass
                  :key="item.studentClass">{{item.studentClass}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>

        <el-form-item prop="name" label="姓名">
          <el-dropdown @command="getStuName" trigger="click">
            <el-button type="primary">
              {{this.ruleForm.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in stuNames" :command=item :key="item">{{item}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>

      </el-form>

      <!-- 签到 -->
      <div class="signin">
        <el-button class="btn-signin" type="primary" round :disabled="ruleForm.name=='请输入姓名'?true:false"
          @click="Signin">开始签到</el-button>
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          dialogVisible: false,
          dis: true,
          stuClasses: [],
          specialityNames: [],
          classNames: [],
          stuNames: [],
          ruleForm: {
            name: '请输入姓名',
            speciality: '请选择专业',
            stuClass: '请选择班级',
          },
          rules: {
            speciality: [
              { required: true, message: '请选择专业', trigger: 'blur' }
            ],
            stuClass: [
              { required: true, message: '请选择班级', trigger: 'blur' }
            ],
            name: [
              { required: true, message: '请选择姓名', trigger: 'blur' }
            ]
          }
        }
      },
      mounted() {
        axios({
          method: 'GET',
          url: '/register/books'
        }).then(res => {
          this.stuClasses = res.data.data.names
          this.getSpecialityNames()
        })
      },
      methods: {
        getSpecialityNames() {
          let set = new Set()
          this.stuClasses.forEach(item => {
            set.add(item.idClass)
          });
          this.specialityNames = [...set]
          console.log(this.specialityNames)
        },
        getClassNames(command) {
          this.ruleForm.speciality = command
          this.classNames = this.stuClasses.filter(item => item.idClass == this.ruleForm.speciality)
        },
        getStuNames(command) {
          this.ruleForm.stuClass = command
          this.stuNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality && item.studentClass == this.ruleForm.stuClass).names
        },
        getStuName(command) {
          this.ruleForm.name = command
        },
        Signin() {
          axios({
            method: 'POST',
            url: '/register/start',
            data: {
              name: this.ruleForm.name
            }
          }).then(res => {
            console.log(res.data)
            if (res.data.code == 1) {
              this.$message({
                showClose: true,
                message: '签到成功！',
                type: 'success'
              });
              setTimeout(() => {
                location.href = './SuccessSignin.html'
              }, 1000);
            } else if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: '签到失败！请先签退！',
                type: 'error'
              });
            }
          })
        }
      }
    })
  </script>

</body>

</html>